<template>
  <div>
    <el-header style="text-align: right;height: 10vh;font-size: 20px;color: #EBEEF5" class="border">
      <!--        <i class="el-icon-setting" style="margin-right: 15px;font-size: 20px"></i>-->
      <span @click="exitUser">退 出</span>
      <span>
        <el-image style="width: 60px; height: 60px;border-radius: 50%" :src="user_info.img_http" fit="fill" />
      </span>
    </el-header>
    <el-container style="height:89.5vh;width: 100%">
      <el-aside class="aside" width="200px">
        <el-menu :default-openeds="['1', '2']" @select="changIndex">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>个人信息</template>
            <el-menu-item-group>
              <template slot="title">信息管理</template>
              <el-menu-item index="1-1">查看个人信息</el-menu-item>
              <el-menu-item index="1-2">更新个人信息</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">我的好友</template>
              <el-menu-item index="1-3">查看好友</el-menu-item>
              <el-menu-item index="1-4">添加好友</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">图片管理</template>
              <el-menu-item index="1-5">查看图片</el-menu-item>
              <el-menu-item index="1-6">上传图片</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">群聊管理</template>
              <el-menu-item index="1-7">查看群聊</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>消息管理</template>
            <el-menu-item-group>
              <template slot="title">消息</template>
              <el-menu-item index="2-1">我发起的</el-menu-item>
              <el-menu-item index="2-2">我收到的</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main class="main">
          <template v-if="showBool.userInfo">
            <el-card style="height: 670px" class="bgImg1">
              <el-descriptions title="简介" :column="2" border>
                <el-descriptions-item label="头像"><el-image style="width: 100px; height: 100px" :src="user_info.img_http"
                    fit="fill" /></el-descriptions-item>
                <el-descriptions-item label="签名">{{ user_info.text }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{ user_info.nick_name }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ user_info.name }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ user_info.phone }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ getSex(user_info.sex) }}</el-descriptions-item>
                <el-descriptions-item label="入站时间">{{ getTime(user_info.CreatedAt) }}</el-descriptions-item>
                <el-descriptions-item label="入站ID">{{ user_info.user_id }}</el-descriptions-item>
                <el-descriptions-item label="当前状态">{{ user_info.status ? "在线" : "离线" }}</el-descriptions-item>
                <el-descriptions-item label="最后一次上线时间">{{ user_info.login_last }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </template>
          <template v-if="showBool.updateUserInfo">
            <div style="padding-top: 5px" class="">
              <el-card>
                <el-form :model="updateUserInfoReq" :rules="updateUserInfoRules" ref="updateUserInfoReq"
                  label-width="100px" class="demo-ruleForm">
                  <el-form-item label="昵 称" prop="nick_name">
                    <el-input v-model="updateUserInfoReq.nick_name"></el-input>
                  </el-form-item>
                  <el-form-item label="姓 名" prop="name">
                    <el-input v-model="updateUserInfoReq.name"></el-input>
                  </el-form-item>
                  <el-form-item label="电 话" prop="phone">
                    <el-input v-model="updateUserInfoReq.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="性 别" prop="sex">
                    <el-select v-model="updateUserInfoReq.sex" placeholder="请选择活动区域">
                      <el-option label="未填写" value=""></el-option>
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="个 性 签 名" prop="text">
                    <el-input type="textarea" v-model="updateUserInfoReq.text"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="updateUserInfo()">更 新</el-button>
                    <el-button @click="resetUpdateInfo()">重 置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </template>
          <template v-if="showBool.queryFriendInfo">
            <div v-if="friendsShow">
              <el-table :data="searchToMyFriend" style="width: 100%" class="border" :stripe="true"
                @selection-change="FriendSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="nick_name" label="昵 称" width="100"></el-table-column>
                <el-table-column prop="name" label="姓 名" width="100"></el-table-column>
                <el-table-column prop="phone" label="电 话" width="100"></el-table-column>
                <el-table-column prop="login_last" label="最后一次上线时间" width="200"></el-table-column>
                <el-table-column prop="status" label="状态" width="100"></el-table-column>
                <el-table-column prop="sex" label="性 别" width="100"></el-table-column>
                <el-table-column label="操作">
                  <template #default="data">
                    <el-button @click="chatToFriend(data.row)">聊 天</el-button>
                    <el-button @click="delOldMsg(data.row)">清空历史消息</el-button>
                    <el-button @click="delToFriend(data.row)">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button @click="CreateGroup()" v-if="IsCheckBox">创建群聊</el-button>
            </div>
            <div v-if="!friendsShow" style="height: 600px">
              <el-card style="height: 100%"><el-empty :image-size="300"></el-empty></el-card>
            </div>
          </template>
          <template v-if="showBool.addFriendInfo">
            <span>
              请 输 入 昵 称: <el-autocomplete v-model="nick_name" :fetch-suggestions="querySearchAsync" placeholder="请输入昵称"
                @select="handleSelect"></el-autocomplete>
            </span>

            <div v-if="isSearch.show">
              <el-card>
                <el-descriptions title="简介" :column="2" border>
                  <el-descriptions-item label="头像"><el-image style="width: 100px; height: 100px"
                      :src="searchToFriend[isSearch.index].img_http" fit="fill" /></el-descriptions-item>
                  <el-descriptions-item label="签名">{{ searchToFriend[isSearch.index].text }}</el-descriptions-item>
                  <el-descriptions-item label="昵称">{{ searchToFriend[isSearch.index].nick_name }}</el-descriptions-item>
                  <el-descriptions-item label="姓名">{{ searchToFriend[isSearch.index].name }}</el-descriptions-item>
                  <el-descriptions-item label="手机号">{{ searchToFriend[isSearch.index].phone }}</el-descriptions-item>
                  <el-descriptions-item label="性别">{{ getSex(searchToFriend[isSearch.index].sex) }}</el-descriptions-item>
                  <el-descriptions-item label="入站时间">{{ getTime(searchToFriend[isSearch.index].CreatedAt)
                  }}</el-descriptions-item>
                  <el-descriptions-item label="入站ID">{{ searchToFriend[isSearch.index].user_id }}</el-descriptions-item>
                  <el-descriptions-item label="当前状态">{{ searchToFriend[isSearch.index].status ? "在线" : "离线"
                  }}</el-descriptions-item>
                  <el-descriptions-item label="最后一次上线时间">{{ searchToFriend[isSearch.index].login_last
                  }}</el-descriptions-item>
                  <el-descriptions-item label="操作"><el-button type="primary"
                      @click="addFriend">申请添加</el-button></el-descriptions-item>
                </el-descriptions>
              </el-card>
            </div>
            <div v-if="!isSearch.show" style="height: 600px">
              <el-card style="height: 100%"><el-empty :image-size="300"></el-empty></el-card>
            </div>
          </template>
          <template v-if="showBool.queryImgInfo">
            <div class="">
              <el-card>
                <el-table :data="imagesInfo" height="500px" :stripe="true">
                  <el-table-column width="300">
                    <template #default="ref">
                      <el-image style="width: 100px; height: 100px" :src="ref.row.image_http" fit="fill" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="info.ID" label="ID" width="300" />
                  <el-table-column prop="image_http" label="图片链接" width="300" />
                  <el-table-column width="200" label="操作">
                    <template #default="data">
                      <el-button link type="primary" size="small" @click="upImgToUserInfo(data.row)">设 为 头 像</el-button>
                      <el-button link type="primary" size="small" @click="deleteImg(data.row)">删 除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="imgPage.total" :page-size="imgPage.size"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
              </el-card>
            </div>
          </template>
          <template v-if="showBool.upImgInfo">
            <div class="flex_row " style="height: 650px">
              <el-card class="bgImg">
                <div>
                  <el-upload class="upload-demo" name="img" multiple :limit="1" :http-request="changImgFile" action="">
                    <i class="el-icon-upload" style="font-size: 60px;color: #B3C0D1"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <el-button type="primary" @click="upImg">提交</el-button>
                  <el-button>取消</el-button>
                </div>
              </el-card>
            </div>
          </template>
          <template v-if="showBool.queryMessageFrom">
            <div class="">
              <el-card>
                <el-table :data="formMessage" height="500px" :stripe="true">
                  <el-table-column prop="ID" label="ID" width="100" />
                  <el-table-column prop="to_name" label="接收方昵称" width="200" />
                  <el-table-column prop="body" label="内容" width="300" />
                  <el-table-column prop="CreatedAt" label="创建时间" width="200" />
                  <el-table-column prop="status" label="状态" width="100" />
                  <el-table-column width="200" label="操作">
                    <template #default="data">
                      <el-button link type="primary" size="small" @click="delMessage(data.row)">撤 回 消 息</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="imgPage.total" :page-size="imgPage.size"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
              </el-card>
            </div>
          </template>
          <template v-if="showBool.queryMessageTo">
            <div class="">
              <el-card>
                <el-table :data="toMessage" height="500px" :stripe="true">
                  <el-table-column prop="ID" label="ID" width="100" />
                  <el-table-column prop="to_name" label="接收方昵称" width="200" />
                  <el-table-column prop="body" label="内容" width="300" />
                  <el-table-column prop="CreatedAt" label="创建时间" width="200" />
                  <el-table-column prop="status" label="状态" width="100" />
                  <el-table-column width="300" label="操作">
                    <template #default="data">
                      <el-button link type="primary" size="small" @click="confirmAdd(data.row)"
                        v-if="data.row.status === '请求中'">确 认 添 加</el-button>
                      <el-button link type="primary" size="small" @click="refuseAdd(data.row)"
                        v-if="data.row.status === '请求中'">拒 绝 添 加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="imgPage.total" :page-size="imgPage.size"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
              </el-card>
            </div>
          </template>
          <template v-if="showBool.queryGroupTo">
            <div class="" v-if="groupShow">
              <el-card>
                <el-table :data="groups" height="500px" :stripe="true">
                  <el-table-column width="200">
                    <template #default="ref">
                      <el-image style="width: 100px; height: 100px" :src="ref.row.img_src" fit="fill" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="ID" label="ID" width="100" />
                  <el-table-column prop="name" label="名称" width="100" />
                  <el-table-column prop="text" label="公告" width="300" />
                  <el-table-column width="600" label="操作">
                    <template #default="data">
                      <el-button link type="primary" size="small" @click="GroupOwner(data.row)"
                        v-if="data.row.owner_id === user_info.ID + ''">详 细 信 息</el-button>
                      <el-button link type="primary" size="small" @click="toGroupChat(data.row)">进 入 群 聊</el-button>
                      <el-button link type="primary" size="small" @click="addGroup(data.row)">邀 请 加 入</el-button>
                      <el-button link type="primary" size="small" @click="exitGroup(data.row)">退 出 群 聊</el-button>
                      <el-button link type="primary" size="small" @click="DelGroup(data.row)">删 除 群 聊</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="imgPage.total" :page-size="imgPage.size"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
              </el-card>
            </div>
            <div v-if="!groupShow" style="height: 600px">
              <el-card style="height: 100%"><el-empty :image-size="300"></el-empty></el-card>
            </div>
          </template>
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
    <div v-if="addGroupVisible">
      <el-dialog title="邀请加入群聊" :visible.sync="addGroupVisible" width="80%" top="0" :show-close="false"
        :destroy-on-close="true" :close-on-click-modal="false" v-if="addGroupVisible" center>
        <div v-if="addGroupVisible">
          <span>
            请 输 入 昵 称: <el-autocomplete v-model="addGroupNickName" :fetch-suggestions="querySearchAsyncToGroup"
              placeholder="请输入昵称" @select="handleSelectToGroup"></el-autocomplete><el-button type="primary"
              @click="addGroupVisible = false">退出</el-button>
          </span>

          <div v-if="isSearchToGroup.show">
            <el-card>
              <el-descriptions title="简介" :column="2" border>
                <el-descriptions-item label="头像"><el-image style="width: 100px; height: 100px"
                    :src="searchToFriend[isSearchToGroup.index].img_http" fit="fill" /></el-descriptions-item>
                <el-descriptions-item label="签名">{{ searchToFriend[isSearchToGroup.index].text }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{ searchToFriend[isSearchToGroup.index].nick_name
                }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ searchToFriend[isSearchToGroup.index].name }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ searchToFriend[isSearchToGroup.index].phone }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ getSex(searchToFriend[isSearchToGroup.index].sex)
                }}</el-descriptions-item>
                <el-descriptions-item label="入站时间">{{ getTime(searchToFriend[isSearchToGroup.index].CreatedAt)
                }}</el-descriptions-item>
                <el-descriptions-item label="入站ID">{{ searchToFriend[isSearchToGroup.index].user_id
                }}</el-descriptions-item>
                <el-descriptions-item label="当前状态">{{ searchToFriend[isSearchToGroup.index].status ? "在线" : "离线"
                }}</el-descriptions-item>
                <el-descriptions-item label="最后一次上线时间">{{ searchToFriend[isSearchToGroup.index].login_last
                }}</el-descriptions-item>
                <el-descriptions-item label="操作"><el-button type="primary"
                    @click="addPeopleGroup">邀请加入</el-button></el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>
          <div v-if="!isSearchToGroup.show" style="height: 500px">
            <el-card style="height: 100%"><el-empty :image-size="300"></el-empty></el-card>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script >
export default {
  name: "index",
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      index: 0,
      showBool: {
        userInfo: true,
        updateUserInfo: false,
        addFriendInfo: false,
        queryFriendInfo: false,
        upImgInfo: false,
        queryImgInfo: false,
        queryGroupTo: false,
        queryGroup: false,
        queryMessageFrom: false,
        queryMessageTo: false,
      },
      tableData: Array(20).fill(item),
      //用户信息
      user_info: {
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        friends: "",
        groups: "",
        img_id: "",
        img_http: "",
        name: "",
        nick_name: "",
        password: "",
        phone: "",
        sex: "",
        text: "",
        user_id: "",
        username: "",
        login_last: "",
        status: ""
      },
      //更新用户信息
      updateUserInfoReq: {
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        friends: "",
        groups: "",
        img_id: "",
        img_http: "",
        name: "",
        nick_name: "",
        password: "",
        phone: "",
        sex: "",
        text: "",
        user_id: "",
        username: "",
        login_last: "",
        status: ""
      },
      updateUserInfoRules: {
        nick_name: [
          { required: true, message: '⚆_⚆ 请输入昵称:', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: 'ヽ(°▽°)ノ 请输入姓名:', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号必填', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        text: [
          { required: true, message: '٩(ˊ〇ˋ*)و 请输入签名:', trigger: 'blur' },
        ],
      },
      //输入框
      restaurants: [],
      restaurantsToGroup: [],
      nick_name: '',
      timeout: null,
      //查找的信息- friend
      searchToFriend: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        friends: "",
        groups: "",
        img_id: "",
        img_http: "",
        name: "",
        nick_name: "",
        password: "",
        phone: "",
        sex: "",
        text: "",
        user_id: "",
        username: "",
        login_last: "",
        status: ""
      }],
      isSearch: {
        index: 0,
        show: false,
      },
      isSearchToGroup: {
        index: 0,
        show: false,
      },
      //得到自己的好友
      searchToMyFriend: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        friends: "",
        groups: "",
        img_id: "",
        img_http: "",
        name: "",
        nick_name: "",
        password: "",
        phone: "",
        sex: "",
        text: "",
        user_id: "",
        username: "",
        login_last: "",
        status: ""
      }],
      //图片信息
      imagesInfo: [{
        info: {
          CreatedAt: "",
          DeletedAt: "",
          ID: "",
          UpdateAt: "",
          author_id: "",
          format: "",
          image_id: "",
          name: "",
          size: "",
          src: "",
        },
        image_http: "",
      }],
      //图片表单
      upImgFormData: new FormData(),
      imgPage: {
        total: 0,
        page: 1,
        size: 5,
      },
      //上传的图片
      fileImgList: [{
        name: "", url: ""
      }],
      dialogFormVisible: false,
      friendsShow: false,
      fromMessagePage: {
        total: 0,
        page: 1,
        size: 5,
      },
      //from信息
      formMessage: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdateAt: "",
        form: "",
        to: "",
        type: "",
        to_name: "",
        body: "",
        status: "",
      }],
      //toMessage
      toMessage: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdateAt: "",
        form: "",
        to: "",
        type: "",
        to_name: "",
        body: "",
        status: "",
      }],
      IsCheckBox: false,
      GroupList: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        friends: "",
        groups: "",
        img_id: "",
        img_http: "",
        name: "",
        nick_name: "",
        password: "",
        phone: "",
        sex: "",
        text: "",
        user_id: "",
        username: "",
        login_last: "",
        status: ""
      }],
      groupShow: false,
      groups: [{
        CreatedAt: "",
        DeletedAt: "",
        ID: "",
        UpdatedAt: "",
        name: "",
        owner_id: "",
        owner_name: "",
        img_id: "",
        img_src: "",
        peoples: "",
        peoples_name: [],
        managers: "",
        msg_ids: "",
        all_msg: "",
        text: "",
      }],
      addGroupVisible: false,
      addGroupNickName: "",
      GroupIndex: {}
    }
  },
  methods: {
    //菜单变化
    changIndex(e) {
      switch (e) {
        case "1-1":
          return this.index = 0
        case "1-2":
          if (this.user_info.nick_name !== "") {
            this.updateUserInfoReq = this.user_info
          }
          return this.index = 1
        case "1-3":
          this.getFriedInfo()
          return this.index = 2
        case "1-4":
          return this.index = 3
        case "1-5":
          this.searchAllImg()
          return this.index = 4
        case "1-6":
          return this.index = 5
        case "2-1":
          this.getAllMessageByForm()
          return this.index = 6
        case "2-2":
          this.getAllMessageByTo()
          return this.index = 7
        case "1-7":
          this.getAllGroups()
          return this.index = 8
      }
    },
    //退出
    exitUser(e) {
      // console.log(e)
      this.$router.push("/")
    },
    //查看个人信息
    getUserInfo() {
      let token = localStorage.getItem("token")
      let that = this
      this.$axios({
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": "Bearer " + token
        },
        method: 'get',
        url: '/user/user_info',
      }).then((res) => {
        let result = res.data
        if (result.code === 1000) {
          that.user_info = result.data
        }
      })
    },
    //更新个人信息
    updateUserInfo() {
      let that = this;
      let token = localStorage.getItem("token")
      this.$refs.updateUserInfoReq.validate((result) => {
        if (!result) return;
        this.$axios({
          headers: {
            "Authorization": "Bearer " + token
          },
          method: 'post',
          url: '/user/update',
          data: JSON.stringify(that.updateUserInfoReq)
        }).then((res) => {
          let result = res.data
          if (result.code === 1000) {
            this.$message({
              message: '更新成功',
              type: 'success'
            });
            return
          } else {
            this.$message.error(result.msg);
          }
        })
      });
    },
    resetUpdateInfo() {
      this.$refs.updateUserInfoReq.resetFields();
    },
    //获得好友信息
    getFriedInfo() {
      let that = this
      let token = localStorage.getItem("token")
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'get',
        url: '/user/friends ',
      }).then((res) => {
        let result = res.data
        if (result.code === 1000) {
          if (result.data === null) {
            return
          }
          that.searchToMyFriend = []
          result.data.forEach((res) => {
            switch (res.status) {
              case true:
                res.status = "在线"; break;
              case false:
                res.status = "离线"; break;
            }
            switch (res.sex) {
              case "0":
                res.sex = "未填写"; break;
              case "1":
                res.sex = "男"; break;
              case "2":
                res.sex = "女"; break;
            }
            that.searchToMyFriend.push(res)
          })
          that.friendsShow = true
        } else {
          this.$message.error(result.msg);
        }
      })
    },
    //搜索
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    querySearchAsyncToGroup(queryString, cb) {
      var restaurants = this.restaurantsToGroup;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 2000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.isSearch.index = item.index
      this.isSearch.show = true
    },
    handleSelectToGroup(item) {
      this.isSearchToGroup.index = item.index
      this.isSearchToGroup.show = true
    },
    searchUserByNickName(name) {
      this.restaurants = []
      let that = this;
      this.$axios.get("/user/like/nickName?page=1&size=20&nick_name=" + name)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            that.searchToFriend = result.data
            result.data.forEach((info, i) => {
              let demo = { index: "", value: "" }
              demo.index = i
              demo.value = info.nick_name
              that.restaurants.push(demo)
            })
          }
        })
    },
    searchUserByNickNameToGroup(name) {
      this.restaurantsToGroup = []
      let that = this;
      this.$axios.get("/user/like/nickName?page=1&size=20&nick_name=" + name)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            that.searchToFriend = result.data
            result.data.forEach((info, i) => {
              let demo = { index: "", value: "" }
              demo.index = i
              demo.value = info.nick_name
              that.restaurantsToGroup.push(demo)
            })
          }
        })
    },
    //添加好友
    addFriend() {
      let demo = { from: "", to: "", type: "", body: "", to_nick_name: "" }
      let that = this
      demo.from = this.user_info.ID + ""
      demo.to = this.searchToFriend[this.isSearch.index].ID + ""
      demo.type = "add_friend"
      demo.body = this.user_info.nick_name + "请求加为好友"
      demo.to_nick_name = this.searchToFriend[this.isSearch.index].nick_name
      this.$axios.post("/message/add", demo).then((res) => {
        let result = res.data
        if (result.code === 1000) {
          this.$message({
            message: '申请成功',
            type: 'success'
          });
        } else if (result.code === 1005) {
          this.$message({
            message: '已经申请过了',
            type: 'warning'
          });
          return
        } else {
          this.$message.error(result.msg);
        }
      })
    },
    //邀请添加群友
    addPeopleGroup() {
      let exist = true
      //判断是否已经在群中
      let peoples = this.GroupIndex.peoples.split("|")
      peoples.forEach((res) => {
        if (res === this.searchToFriend[this.isSearch.index].ID + "") {
          this.$message.warning("已经在群聊中")
          exist = false
          return
        }
      })
      let that = this
      setTimeout(function () {
        if (exist) {
          let demo = { from: "", to: "", type: "", body: "", to_nick_name: "" }
          demo.from = that.user_info.ID + ""
          demo.to = that.searchToFriend[that.isSearch.index].ID + ""
          demo.type = "add_group|" + that.GroupIndex.ID
          demo.body = that.user_info.nick_name + "邀请加入群聊:" + that.GroupIndex.name
          demo.to_nick_name = that.searchToFriend[that.isSearch.index].nick_name
          that.$axios.post("/message/add", demo).then((res) => {
            let result = res.data
            if (result.code === 1000) {
              that.$message({
                message: '申请成功',
                type: 'success'
              });
            } else if (result.code === 1005) {
              that.$message({
                message: '已经申请过了',
                type: 'warning'
              });
              return
            } else {
              that.$message.error(result.msg);
            }
          })
        }
      }, 1000)

    },
    //和朋友聊天
    chatToFriend(val) {
      // console.log(val)
      this.$router.push({
        name: `wechat`,
        params: {
          form: this.user_info.user_id,
          to: val.user_id,
        }
      })
    },
    //删除好友
    delToFriend(val) {
      let that = this
      let token = localStorage.getItem("token")
      let demo = { friend_id: "" }
      demo.friend_id = val.ID + ""
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: "/socket/friend/del",
        data: demo
      }).then((resp) => {
        if (resp.data.code === 1000) {
          //浏览器弹出消息
          that.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    //创建群聊
    CreateGroup() {
      //判断是否选择对应的用户
      if (this.GroupList.length === 0) {
        this.$message.warning("请选择群成员")
        return
      }
      let that = this
      //跳转到创建群聊界面
      this.$router.push({
        name: "groupInfo",
        params: {
          data: that.GroupList
        }
      })
    },
    //设置为头像
    upImgToUserInfo(e) {
      let that = this
      let upImgToUserInfoReq = { img_id: "" }
      let token = localStorage.getItem("token")
      upImgToUserInfoReq.img_id = e.info.ID + ""
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: "/user/img/add",
        data: upImgToUserInfoReq
      }).then((resp) => {
        if (resp.data.code === 1000) {
          //浏览器弹出消息
          that.$message({
            message: "更新成功",
            type: "success",
          });
          //重新获得用户信息
          that.getUserInfo()
        } else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    //删除图片
    deleteImg(e) {
      let that = this
      let deleteImgReq = { img_id: "" }
      let token = localStorage.getItem("token")
      deleteImgReq.img_id = e.info.image_id
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: "/img/delete ",
        data: deleteImgReq
      }).then((resp) => {
        if (resp.data.code === 1000) {
          //浏览器弹出消息
          that.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    //选择图片
    changImgFile(e) {
      this.upImgFormData.append('img', e.file)
    },
    //上传头像
    upImg() {
      if (this.upImgFormData.get("img") === null) {
        this.$message.warning("没有选择图片")
        return
      }
      let that = this
      let token = localStorage.getItem('token')
      this.$axios({
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: '/img/up',
        data: that.upImgFormData
      }).then((resp) => {
        if (resp.data.code === 1000) {
          //浏览器弹出消息
          that.$message({
            message: "上传成功",
            type: "success",
          });
          //删除键
          that.upImgFormData.delete('img')
        } else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    searchAllImg() {
      let that = this
      let token = localStorage.getItem('token')
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: "/img/search?page=" + that.imgPage.page + "&size=" + that.imgPage.size,
      }).then((res) => {
        that.imagesInfo = res.data.data
        that.imgPage.total = res.data.count

      })
    },
    searchAllImgToPage() {
      let that = this
      let token = localStorage.getItem('token')
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: "/img/search?page=" + that.imgPage.page + "&size=" + that.imgPage.size,
      }).then((res) => {
        that.imagesInfo = res.data.data
      })
    },
    //选择性别
    getSex(i) {
      switch (i) {
        case "0":
          return "未填写"
        case "1":
          return "男"
        case "2":
          return "女"
      }
    },
    //得到时间
    getTime(val) {
      let str1 = val.split("T")
      // let first= str1[0]
      // let second = str1[1].split(".")[0]
      return str1[0]
    },
    //分页
    handleSizeChange(e) {
      // console.log(e)
    },
    handleCurrentChange(e) {
      this.imgPage.page = e
      this.searchAllImgToPage()
    },
    //查找我发起的消息
    getAllMessageByForm() {
      let that = this
      let token = localStorage.getItem('token')
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'get',
        url: "/message/user/from?page=" + that.imgPage.page + "&size=" + that.imgPage.size,
      }).then((res) => {
        that.formMessage = []
        if (res.data.data === null) {
          return
        }
        res.data.data.forEach((res) => {
          res.CreatedAt = that.getTime(res.CreatedAt)
          that.formMessage.push(res)
        })
      })
    },
    getAllMessageByTo() {
      let that = this
      let token = localStorage.getItem('token')
      this.$axios({
        headers: {
          "Authorization": "Bearer " + token
        },
        method: 'get',
        url: "/message/user/to?page=" + that.imgPage.page + "&size=" + that.imgPage.size,
      }).then((res) => {
        that.toMessage = []
        if (res.data.data === null) {
          return
        }
        res.data.data.forEach((res) => {
          res.CreatedAt = that.getTime(res.CreatedAt)
          that.toMessage.push(res)
        })
      })
    },
    delMessage(val) {
      let that = this
      let demo = { message_id: "" }
      demo.message_id = val.ID + ""
      this.$axios.post("/message/del", demo)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            that.$message({
              message: "撤回成功",
              type: "success",
            });
          }
        })
    },
    //确认添加
    confirmAdd(val) {
      let that = this
      if (val.type === "add_friend") {
        let demo = { friend_id: "" }
        demo.friend_id = val.from
        let token = localStorage.getItem("token")
        this.$axios({
          headers: {
            "Authorization": "Bearer " + token
          },
          method: 'post',
          url: '/user/friends/add ',
          data: demo
        }).then((res) => {
          let result = res.data
          if (result.code === 1000) {
            //修改信息的状态
            that.upDateMessage(val.ID + "", "确认添加")
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            return
          } else if (result.code === 1005) {
            this.$message({
              message: '你们已经是好友了',
              type: 'warning'
            });
            return
          } else {
            this.$message.error(result.msg);
          }
        })
      } else {
        let groupInfo = val.type.split("|")
        let demo = { user_id: "", group_id: "" }
        demo.user_id = this.user_info.ID + ""
        demo.group_id = groupInfo[1]
        this.$axios.post("group/people/add", demo)
          .then((res) => {
            let result = res.data
            if (result.code === 1000) {
              //修改信息的状态
              that.upDateMessage(val.ID + "", "确认添加")
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              return
            } else if (result.code === 1005) {
              this.$message({
                message: '你们已经是好友了',
                type: 'warning'
              });
              return
            } else {
              this.$message.error(result.msg);
            }
          })
      }
    },
    refuseAdd(val) {
      this.upDateMessage(val.ID + "", "拒绝添加")
      this.$message.success("修改成功")

    },
    //修改信息状态
    upDateMessage(id, status) {
      let that = this
      let demo = { status: "", message_id: "" }
      demo.message_id = id
      demo.status = status
      this.$axios.post("/message/update", demo)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            return true
          }
        })
    },
    //清空历史消息
    delOldMsg(val) {
      let demo = { from: "", to: "" }
      let that = this
      demo.from = that.user_info.user_id
      demo.to = val.user_id
      this.$axios.post("/socket/oldMsg/del", demo)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            that.$message.success("清空成功")
          }
        })
    },
    //选择成员
    FriendSelectionChange(e) {
      if (e.length === 0) {
        this.IsCheckBox = false
      } else {
        this.IsCheckBox = true
      }
      this.GroupList = []
      e.forEach((res) => {
        this.GroupList.push(res)
      })

      // console.log(this.groupList)
    },
    //查看自己的群聊
    getAllGroups() {
      let that = this;
      let demo = { page: 1, size: 10 }
      let token = localStorage.getItem("token")
      this.$axios({
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": "Bearer " + token
        },
        method: 'post',
        url: '/group/all',
        data: JSON.stringify(demo)
      }).then((res) => {
        let result = res.data
        if (result.code === 1000) {
          that.groups = result.data
          if (that.groups !== null) {
            that.groupShow = true
          } else {
            that.groupShow = false
          }
        }
      })
    },
    toGroupChat(e) {
      let that = this
      this.$router.push({
        name: "group",
        params: {
          data: e,
          userId: that.user_info.user_id
        }
      })
    },
    //退出群聊
    exitGroup(e) {
      // console.log(e)
      let that = this
      let demo = { group_id: "", user_id: "" }
      demo.group_id = e.ID + ""
      demo.user_id = this.user_info.ID + ""
      console.log(demo)
      this.$axios.post("/user/group/del", demo)
        .then((res) => {
          let result = res.data
          if (result.code === 1000) {
            that.$message.success("退出成功")
          }
        })
    },
    //邀请加入
    addGroup(e) {
      this.GroupIndex = e
      this.addGroupVisible = true
    },
    //群聊信息管理
    GroupOwner(e) {
      this.$router.push({
        name: "group_owner",
        params: {
          data: e,
          owner: this.user_info
        }
      })
    },
    DelGroup(e) {
      let that = this
      let peoples = e.peoples.split("|")
      peoples.forEach((res) => {
        that.delGroupToUser(res, e.ID + "")
      })
      this.delGroup(e.ID + "")
    },
    delGroupToUser(user_id, group_id) {
      // console.log(e)
      let that = this
      let demo = { group_id: "", user_id: "" }
      demo.group_id = group_id
      demo.user_id = user_id
      this.$axios.post("/user/group/del", demo)
        .then((res) => {
        })
    },
    delGroup(id) {
      let that = this
      let demo = { group_id: "" }
      demo.group_id = id
      this.$axios.post("/group/del", demo)
        .then((res) => {
          that.$message.success("删除成功")
        })
    }
  },
  watch: {
    index(newValue, oldValue) {
      switch (oldValue) {
        case 0:
          this.showBool.userInfo = false; break;
        case 1:
          this.showBool.updateUserInfo = false; break;
        case 2:
          this.showBool.queryFriendInfo = false; break;
        case 3:
          this.showBool.addFriendInfo = false; break;
        case 4:
          this.showBool.queryImgInfo = false; break;
        case 5:
          this.showBool.upImgInfo = false; break;
        case 6:
          this.showBool.queryMessageFrom = false; break;
        case 7:
          this.showBool.queryMessageTo = false; break;
        case 8:
          this.showBool.queryGroupTo = false; break;
      }
      switch (newValue) {
        case 0:
          this.showBool.userInfo = true; break;
        case 1:
          this.showBool.updateUserInfo = true; break;
        case 2:
          this.showBool.queryFriendInfo = true; break;
        case 3:
          this.showBool.addFriendInfo = true; break;
        case 4:
          this.showBool.queryImgInfo = true; break;
        case 5:
          this.showBool.upImgInfo = true; break;
        case 6:
          this.showBool.queryMessageFrom = true; break;
        case 7:
          this.showBool.queryMessageTo = true; break;
        case 8:
          this.showBool.queryGroupTo = true; break;
      }
    },
    nick_name(newValue, oldValue) {
      this.searchUserByNickName(newValue)
    },
    addGroupNickName(newValue, oldValue) {
      this.searchUserByNickNameToGroup(newValue)
    },
    addGroupVisible(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  },
  created() {
    this.getUserInfo()
  },
  mounted() {
  }
};
</script>

<style scoped>
.el-header {
  background-image: -webkit-linear-gradient(right, #accbee 0%, #e7f0fd 100%);
}

.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 100%;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.aside {
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
  text-align: center;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

/**/
.border {
  box-sizing: border-box;
  padding: 5px 10px;
}

.common-layout {
  padding: 0;
  margin: 0;
}

::v-deep(.upload-demo) {
  margin: 10px;
}

::v-deep(.el-menu-item.is-active) {
  color: red;
}

::-webkit-scrollbar {
  display: none;
}

/*userinfo*/
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}

.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bgImg {
  background-image: url("@/assets/pmo_bg.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%
}

.bgImg1 {
  background-image: url("@/assets/pmo_bg2.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%
}</style>